<template>
  <div class="ring-chart-wrapper">
    <ve-ring
      :data="chartData"
      :settings="chartSettings"
      :extend="extendSettings"
      :theme="tdTheme"
      :judge-width="true"
      height="100%"
      ref="chart"
      :after-set-option="handleAfterSet"
    ></ve-ring>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import { fontSize } from '@/libs/util'
import ChartMixin from './chartMixins'
import ChartTimerMixins from './chartTimerMixins'

@Component({
  name: 'RingChart',
  mixins: [ChartMixin, ChartTimerMixins]
})
export default class RingChart extends Vue {
  @Watch('chartActiveIndex')
  handleActiveIndexChange(newVal: number) {
    if (!this.vm) {
      return
    }
    this.vm.dispatchAction({
      type: 'downplay',
      seriesIndex: [0, 1, 2, 3],
      dataIndex: [0, 1, 2, 3]
    })

    this.vm.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: newVal })
  }
  _this = this
  tdTheme = require('./theme.json')
  chartSettings = {
    radius: ['50%', '60%'],
    center: ['50%'],
    avoidLabelOverlap: true,
    selectedMode: 'single',
    selectedOffset: 0
  }
  extendSettings = {
    label: {
      formatter: '{per|{c}}{u|%} {b|{b}}',
      borderWidth: 1,
      borderRadius: 4,
      align: 'center',
      avoidLabelOverlap: true,
      rich: {
        b: {
          fontSize: fontSize(0.14),
          color: '#60AFFF'
        },
        per: {
          color: '#fff',
          fontSize: fontSize(0.14),
          align: 'center'
        },
        u: {
          color: '#fff',
          fontFamily: 'simhei',
          fontSize: fontSize(0.12),
          padding: [0, 0, 2, 2]
        }
      }
    },
    legend: {
      orient: 'vertical',
      x: 'right',
      y: 'bottom'
    },
    color: ['#BE4A55', '#EBAF53', '#4CE1FB', '#26CBA6'],
    series: (param: any) => {
      console.log(param, 'param')
      param[0].center = ['50%', '50%']
      param[0].avoidLabelOverlap = true
      return param
    }
  }
  chartData = {}
  vm: any

  handleAfterSet(this: any, vm: any) {
    this.vm = vm
    // this.vm.dispatchAction({ type: 'highlight', seriesIndex: 0, dataIndex: 0 })
  }
}
</script>
<style lang="scss" scoped>
.ring-chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  background: url(../assets/images/circle.png) no-repeat center / 28%;
}
</style>
